<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>药品信息</title>
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
	</head>
	<body>
		<!-- 显示药品信息的表格 -->
		<!-- <div class="row1">
			<table class="table table-striped table-hover table-bordered" id="test">
				<thead>
					<tr>
						<th>药品编号</th>
						<th>药品名</th>
						<th>成分</th>
						<th>性状</th>
						<th>功效</th>
						<th>药品价格</th>
						<th>库存量</th>
						<th>药厂编号</th>
						<th>生产日期</th>
						<th>有效期</th>
					</tr>
				</thead>
				<tbody id="tbody1">

				</tbody>
			</table>
		</div> -->
		
		<!-- <div class="row1">
		    <div id="msg"></div>
		</div> -->
		
		<fieldset class="table-search-fieldset">
		    <legend>搜索信息</legend>
				<div style="margin: 10px 10px 10px 10px">
					<!-- 查询框 -->
					<form class="layui-form layui-form-pane layui-inline" style="width: 600px;">
						<div class="layui-inline">
							<label class="layui-form-label">药品名</label>
							<div class="layui-input-block">
							  <input type="text" name="medName" lay-verify="required" placeholder="请输入药品名" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<div class="layui-input-block">
								<button class="layui-btn" lay-submit=""  lay-filter="demo1">查询</button>
							</div>
						</div>
					</form>
				</div>
		</fieldset>
		
		<table class="layui-hide" id="test" lay-filter="test"></table>
		
		<div class="row">
			<div class="col-md-12">
				<div id="mycharts" style="height: 500px;border: 1px solid gray;background-color:#fff;"></div>
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-12" style="background-color:#fff;margin-bottom: 5px;">
				<div id="pieMap" style="height: 600px;"></div>
			</div>
		</div>
		
		<script src="js/jquery-3.4.1.js"></script>
		<script src="js/echarts.js"></script>
		<script src="layui/layui.js"></script>
		<script>
			
			$(function () {
				layui.use(['table','form'], function(){
				  var table = layui.table,
				  form=layui.form,
				  $=layui.jquery;
				  
				  tableIn = table.render({
					elem: '#test'
					,url:'http://localhost:8081/query/queryMedicineByName'
					,toolbar: '#toolbarDemo'
					,title: '药品表'
					,id:'medTable'
					,cols: [[
					  {field:'medId', title:'药品编号', width:90, fixed: 'left', unresize: true}
					  ,{field:'medName', title:'药品名', width:120}
					  ,{field:'medIngredient', title:'成分', width:90}
					  ,{field:'medCharacter', title:'性状', width:100}
					  ,{field:'medEffect', title:'功效'}
					  ,{field:'medPrice', title:'药品价格', width:100}
					  ,{field:'medStorage', title:'库存量', width:100}
					  ,{field:'factoryId', title:'药厂编号', width:100}
					  ,{field:'medProDate', title:'生产日期', width:120}
					  ,{field:'medUseDate', title:'有效期', width:120}
					]]
					,page: true
				  });
				  
				  // 监听搜索操作
				  form.on('submit(demo1)', function (data) {
					  // layer.alert(JSON.stringify(data.field), {
					  //   title: '最终的提交信息'
					  // });
				
						//执行搜索重载
						table.reload('medTable', {
							page: {
								curr: 1
							}
							, where: {
								medName : data.field.medName
							}
						}, 'data');
									
					  return false;
				  });
				});
				
				//定义个用来给表格中装载数据的函数
				var fillToTable = function (meds) {
					var tbody1 = $("#tbody1");
					tbody1.empty();
					$.each(meds, function (index, med) {
						var tr = $("<tr>");
						var td = $("<td>");
						td.text(med.medId);
						tr.append(td);
						td = $("<td>");
						td.html("" + med.medName);
						tr.append(td);
		
						td = $("<td>");
						td.html("" + med.medIngredient);
						tr.append(td);
		
		
						td = $("<td>");
						td.html("" + med.medCharacter);
						tr.append(td);
		
						td = $("<td>");
						td.html("" + med.medEffect);
						tr.append(td);
		
						td = $("<td>");
						td.html("" + med.medPrice);
						tr.append(td);
						
						td = $("<td>");
						td.html("" + med.medStorage);
						tr.append(td);
						
						td = $("<td>");
						td.html("" + med.factoryId);
						tr.append(td);
						
						td = $("<td>");
						td.html("" + med.medProDate);
						tr.append(td);
						
						td = $("<td>");
						td.html("" + med.medUseDate);
						tr.append(td);
		
						tbody1.append(tr);
					});
				};
		
				//发送请求获取最新疫情数据
				$.ajax({
					type:"get",
					url:"http://localhost:8081/query/queryMedicine",
					async:true,  //异步请求，请求时不会阻塞后面的操作
					contentType:"application/json;charset=UTF-8",
					xhrFields: {
						withCredentials: true
					},
					success:function(res){
						// sessionStorage.setItem("userName",res.data);
						console.log(res);
						// fillToTable(resp.data);
						if(res.code==0){
							// fillToTable(res.data);
							fillToChart(res.data);
							fillToPieMap(res.data);
						}else{
							$('#msg').text(res.msg);
						}
					}
				});
				
				//初始化饼状图
				var myPieMap = echarts.init($("#pieMap").get(0));
				myPieMap.setOption({
					series : [
						{
							name: '访问来源',
							type: 'pie',
							radius: '55%',
							data:[]
						}
					]
				})
				var fillToPieMap = function (meds) {
					var data = [];
					$.each(meds, function (index, med) {
						var obj={};
						obj.name=med.medName;
						obj.value=med.medStorage;
						data.push(obj);
					});
					myPieMap.setOption({
						title: {
							text: "药品库存量饼状图"
						},
						series: [
							{
								name: '访问来源',
								type: 'pie',
								radius: '55%',
								data: data
							}
						]
					})
				};
				
				//初始化柱状图
				var myCharts = echarts.init($("#mycharts").get(0));
				var option = {
					title: {
						text: "药品库存量柱状图"
					},
					tooltip: {
					    trigger: 'axis'
					},
					xAxis: {
					        type: 'category',
					        data: []
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						type: 'bar',
						data: [],
						showBackground: true,
						itemStyle: {
							color: 'rgba(0, 170, 255, 0.8)'
						}
					}]
				};
				myCharts.setOption(option);
				//将服务器端返回的数据设置到图表上
				var fillToChart = function (meds) {
					var medNames = [];
					var medStorages = [];
					$.each(meds, function (index, med) {
						medNames.push(med.medName);
						medStorages.push(med.medStorage);
					});
					myCharts.setOption({
						xAxis: {
							data: medNames
						},
						series: [{
							data: medStorages
						}]
					});
				};
			});
			
			
		</script>
	</body>
</html>
